<template>
  <BaseContent
    label="新闻动态"
    :items="tabItem"
    class-name="nei_right_title"
    :links="breadcrumbsLinks"
  >
    <div class="activity-alert-box">
      <div v-for="news in newsList" :key="news.id" class="content">
        <div class="time">
          <h2 v-formatday>{{ news.time }}</h2>
          <p v-formatyear>{{ news.time }}</p>
          <span v-formatmonth>{{ news.time }}</span>
        </div>
        <div class="message-item">
          <div class="title">
            <h2>{{ news.message }}</h2>
            <span>{{ news.description }}</span>
          </div>
          <router-link class="to-detail" to="">></router-link>
        </div>
      </div>
    </div>
  </BaseContent>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { DreadcrumbsLinksData } from '@/constants/constantType'
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/home'

const store = useHomeStore()
const { newsList } = storeToRefs(store)
const tabItem = ref<DreadcrumbsLinksData[]>([
  { to: '/activity-alert', label: '活動快訊' },
  { to: '', label: '行业资讯' },
])
const breadcrumbsLinks = ref<DreadcrumbsLinksData[]>([
  { to: '/home', label: '首页' },
  { label: '活動快訊' },
])
onMounted(() => {
  console.log('newsList', newsList.value)
})
</script>

<style lang="scss" scoped></style>
